import React from 'react';
import { isEmpty, isEqual } from 'lodash';
import { withLeaflet, Polyline } from 'react-leaflet';
import { isLngLat } from 'src/util/mapUtil';
import setting from './setting';

class LTrack extends React.Component {
  shouldComponentUpdate(nextProps) {
    const { data, config } = this.props;
    if (!isEqual(data, nextProps.data)
      || !isEqual(config, nextProps.config)
    ) return true;
    return false;
  }

  static setting = setting;

  onChangeDisplay = (position) => {
    if (position === 'current') return;
    const { leaflet: { map } } = this.props;
    const bounds = [];

    this.mapData.map((item) => (
      bounds.push(item.slice(0, 1), item.slice(-1))
    ));

    if (isEmpty(bounds)) return;
    // 地图会根据点位调整zoom和center，先默认为每组数据的起始点
    if (position === 'default') {
      this.onClickTop();
    } else {
      try {
        map.fitBounds(bounds);
      } catch (e) {
        // eslint-disable-next-line no-console
        console.log(e);
      }
    }
  }

  onClickTop = () => {
    const { leaflet: { map } } = this.props;
    const { options: { center, zoom } } = map;

    map.setView(center, zoom);
  }

  get mapData() {
    const { data } = this.props;

    if (!isEmpty(data)) {
      return data.map(
        ({ points }) => {
          const pointsStr = points;
          const pointsArr = pointsStr.split(';');
          const pointsArr2 = pointsArr.map((item) => item.split(',').reverse());

          return pointsArr2.filter((item) => Array.isArray(item))
            .filter(([lat = '', lng = '']) => isLngLat(lng, lat));
        }
      );
    }
    return [];
  }

  render() {
    const { config } = this.props;
    if (this.mapData.length === 0) return null;

    const {
      line: {
        lineColor, lineWidth,
        type, position
      },
      button: {
        position: { left, top },
        backgroundColor = '#666',
        font = {},
        border
      }
    } = config;

    const buttonStyle = {
      backgroundColor,
      ...font,
      ...border,
      left,
      top
    };

    this.onChangeDisplay(position);

    const dashArray = type === 'solid'
      ? []
      : type === 'dashed'
        ? [2 * lineWidth, 2 * lineWidth]
        : [0, 2 * lineWidth];
    const lineCap = type === 'dashed' ? 'butt' : 'round';

    return (
      <React.Fragment>
        {this.mapData.map((points, index) => (
          <Polyline
            key={`track${index}`}
            positions={points}
            color={lineColor}
            weight={lineWidth}
            dashArray={dashArray}
            className="trackPolyline"
            lineCap={lineCap}
          />
        ))}
        {<div
          className="leaflet-map-reset-btn"
          style={buttonStyle}
          onClick={this.onClickTop}
        >
          重置
        </div>}
      </React.Fragment>
    );
  }
}

export default withLeaflet(LTrack);
